<script>
export default {
  name: "DropDown",
  data() {
    return {
      show: false,
    }
  },
  methods: {
    showDropdown() {
      this.$refs.dropdown.classList.toggle("show-dropdown")
    }
  }
}
</script>

<template>
  <div class="container">
    <div class="dropdown" id="dropdown-content" ref="dropdown">
      <button class="dropdown__button" id="dropdown-button" @click="showDropdown">
        <i class="el-icon-user dropdown__icon"></i>
        <span class="dropdown__name">My DropDown</span>

        <div class="dropdown__icons">
          <i class="el-icon-arrow-down dropdown__arrow"></i>
          <i class="el-icon-close dropdown__close"></i>
        </div>
      </button>

      <ul class="dropdown__menu">
        <li class="dropdown__item" v-for="n in 4" :key="n">
          <i class="el-icon-apple dropdown__icon"></i>
          <span class="dropdown__name">Options</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="less">
@firstColor: hsl(225, 72%, 55%);
@textColor: hsl(225, 52%, 30%);
@bodyColor: linear-gradient(180deg, hsl(225, 75%, 92%), hsl(225, 78%, 70%));
@containerColor: hsl(225, 75%, 97%);
@normalFontSize: 1rem;

button {
  font-size: @normalFontSize;
  color: @textColor;
  border: 1px solid;
}

ul {
  list-style: none;
}

li {
  color: @textColor;
}

.container {
  height: 100vh;
  display: grid;
  place-items: center;
  background: @bodyColor;

  .dropdown {
    position: relative;
    width: max-content;

    .dropdown__button, .dropdown__item {
      display: flex;
      align-items: center;
      column-gap: .5rem;
    }

    .dropdown__button {
      border: none;
      outline: none;
      background: @containerColor;
      padding: 1.25rem;
      border-radius: .75rem;
      cursor: pointer;
    }

    .dropdown__icon, .dropdown__icons {
      font-size: 1.25rem;
      color: @firstColor;
    }

    .dropdown__icons {
      width: 24px;
      height: 24px;
      display: grid;
      place-items: center;

      .dropdown__arrow, .dropdown__close {
        position: absolute;
        transition: opacity .1s, transform .4s;
      }

      .dropdown__close {
        opacity: 0;
      }
    }

    .dropdown__name {
      font-weight: 500;
    }

    .dropdown__menu {
      background: @containerColor;
      padding: 1rem 1.25rem;
      border-radius: .75rem;
      display: grid;
      row-gap: 1.5rem;
      position: absolute;
      width: 100%;
      left: 0;
      top: 4.5rem;
      transform: scale(0);
      transform-origin: 10rem -2rem;
      pointer-events: none;
      transition: opacity .4s, transition .4s;
      opacity: 0;

      .dropdown__item {
        cursor: pointer;
        transition: color .3s;
      }

      .dropdown__item:hover {
        color: @firstColor;
      }
    }
  }

  .show-dropdown .dropdown__menu {
    opacity: 1;
    transform: scale(1);
    pointer-events: initial;
  }

  .show-dropdown .dropdown__arrow {
    opacity: 0;
    transform: rotate(-180deg);
  }

  .show-dropdown .dropdown__close {
    opacity: 1 !important;
    transform: rotate(-180deg);
  }
}

</style>